@import "~scss/_mixins";

.pageFlex { display: flex; flex-direction: row; justify-content: stretch; width: 100% !important; transition: transform 0.2s $easeInQuint; }
.pageFlex {
	.sidebarDummy { flex-shrink: 0; }
	#page { width: 100%; position: relative; }
}

.sidebarAnimation { transition: width $transitionSidebarTime linear; }

.sidebarHeadIcon { position: fixed; top: 12px; z-index: 25; -webkit-app-region: no-drag; transition: none; }
.sidebarHeadIcon
.sidebarHeadIcon {
	&.sidebarAnimation { transition: left $transitionSidebarTime linear; }
	&:hover, &.hover { background-color: var(--color-shape-highlight-medium) !important; }
}

#sidebarLeftButton { backdrop-filter: blur(20px); left: 84px; }
#sidebarRightButton:not(.withSidebar) { display: none; }

.sidebarHeadIcon.toggle { background-image: url('~img/icon/widget/toggle.svg'); }
.sidebarHeadIcon.plus { background-image: url('~img/icon/widget/plus0.svg'); }

#sidebarUpdateBanner { position: fixed; bottom: 12px; z-index: 25; transition: left $transitionSidebarTime linear; }

.sidebar { position: fixed; z-index: 24; user-select: none; transition: none; top: 0px; height: 100%; background-color: var(--color-shape-tertiary); }
.sidebar.anim { transition-duration: $transitionSidebarTime; transition-timing-function: linear; }
.sidebar.isClosed { left: 0px !important; overflow: hidden; }

.sidebar.left { left: 0px; }
.sidebar.left.withVault { left: $vaultWidthCollapsed; }
.sidebar.left.anim { transition-property: width; }

.sidebar.right { right: -$sidebarRightWidth; width: $sidebarRightWidth; flex-shrink: 0; }
.sidebar.right.anim { transition-property: right; }

.sidebar.withPreview { z-index: 31; }

.sidebar.right {
	@import "./preview";

	> .sidebarPage.pageWidget {
		> .body {
			> .content {
				> .dropTarget.firstTarget { position: relative; }
			}
		}
	}
}

.sidebar {
	.icon { width: 20px; height: 20px; flex-shrink: 0; }
	.icon.back { background-image: url('~img/icon/widget/back0.svg'); }

	@import "./page";
	
	.resize-h { width: 12px; height: calc(100% - 52px); cursor: col-resize; z-index: 2; flex-shrink: 0; position: absolute; right: -12px; top: 52px; background: var(--color-bg-primary); }
	.resize-h {
		.resize-handle {
			position: absolute; left: 0px; top: 50%; margin: -16px 0px 0px 0px; transition: $transitionAllCommon;
			width: 12px; height: 32px;
		}
		.resize-handle::after {
			content: ''; position: absolute; left: 6px; top: 0px; width: 6px; height: 100%; background-color: var(--color-shape-secondary);
			border-radius: 3px; opacity: 0; transition: $transitionAllCommon;
		}
	}
	.resize-h:hover, .resize-h:active {
		.resize-handle::after { opacity: 1; }
	}
	.resize-h:active {
		.resize-handle { height: 64px; margin-top: -32px; }
	}
	.resize-handle:hover::after, .resize-handle:active::after { background-color: var(--color-shape-primary); }

	.loaderWrapper { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }

	.banner.update { position: absolute; bottom: 45px; z-index: 10; left: 12px; width: 312px; }
}

html.platformWindows {
	.sidebar {
		> .containerWidget > .body { overflow-y: overlay; }
	}
}	
